
import { Icon} from '@ant-design/react-native';
import Home from '../../../Pages/Home';
import HotLife from '../../../Pages/HotLife';
import Collect from '../../../Pages/Collect';
import Mine from '../../../Pages/Mine';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { useSelector } from 'react-redux';
import { RootState } from '../../../Store';

const Tab = createBottomTabNavigator();


// 底部标签页组件
const Main = () => {
     const themeColor = useSelector((state: RootState) => state.theme.color)
    return (
        <Tab.Navigator
            screenOptions={{
                tabBarActiveTintColor: themeColor,
                tabBarInactiveTintColor: '#abababff',
                tabBarStyle: {
                    backgroundColor: '#fff',
                    borderTopWidth: 0,
                    height: 60,
                    elevation: 0,       // Android阴影
                    shadowOpacity: 0,   // iOS阴影
                }
            }}
        >
            <Tab.Screen
                name="Home"
                component={Home}
                options={{
                    headerShown: false,
                    tabBarLabel: '首页',
                    tabBarIcon: ({ color }) => (
                        <Icon name="home" color={color} size={24} />
                    ),
                }}
            />
            <Tab.Screen
                name="HotLife"
                component={HotLife}
                options={{
                    headerShown: false,
                    tabBarLabel: '趋势',
                    tabBarIcon: ({ color }) => (
                        <Icon name="line-chart" color={color} size={24} />
                    ),
                }}
            />
            <Tab.Screen
                name="Collect"
                component={Collect}
                options={{
                    headerShown: false,
                    tabBarLabel: '收藏',
                    tabBarIcon: ({ color }) => (
                        <Icon name="heart" color={color} size={24} />
                    ),
                }}
            />
            <Tab.Screen
                name="Mine"
                component={Mine}
                options={{
                    headerShown: false,
                    tabBarLabel: '我的',
                    tabBarIcon: ({ color }) => (
                        <Icon name="user" color={color} size={24} />
                    ),
                }}
            />
        </Tab.Navigator>
    );
};



export default Main;